<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:mm="http://java.sun.com/jsf/composite/components"> 

<h:head>



</h:head> 
<body>
<ui:composition template="/template/mainLayout.xhtml">
	<ui:define name="headContent">
		<h:outputScript name="ventas.js" library="js"></h:outputScript>
			<style type="text/css">
			.arriba{
				height: 290px;
			}
			.vendedor{
				width: 100px;
			}
			
			table.vendedor tbody{
				min-height: 50px;
				max-height: 250px;
			}
			</style>
	</ui:define> 
	<ui:param name="windowsTitle" value="Nueva Venta" />
	<ui:define name="bodyContent">
   	<h:form>
    <h:panelGrid columns="2" columnClasses=",vendedor" styleClass="fullContainer" >
        <rich:panel id="productos" styleClass="arriba">
        <f:facet name="header">
        Filtro de productos
        </f:facet>
        	<h:panelGrid columns="3" >
        	
        		<h:outputText value="Codigo: " />
        		<h:outputText value="Nombre: " />
        		<h:outputText value="Rubro:" />

        		<h:inputText value="#{ventasBean.filtroProductos.codigo}" />
        		
        		<h:inputText value="#{ventasBean.filtroProductos.nombre}" />
        		
        		<h:selectOneMenu value="#{ventasBean.filtroProductos.rubroId}">
        			<f:selectItem itemLabel="Todos"/>
        			<f:selectItems value="#{rubroBean.rubrosActivos}" var="rub" 
        			itemLabel="#{rub.nombre}"
        			itemValue="#{rub.id}">
        			</f:selectItems>
        		</h:selectOneMenu>
        		
        	</h:panelGrid>
        	<h:commandButton style="width: 100px; margin-bottom:5px;" value="Filtrar" action="#{ventasBean.buscarProductosActivos}" />
        	
        	<h:inputHidden  id="valor" value="#{ventasBean.prodToAdd}" />
        	
        	<h:commandButton value="valor" action="#{ventasBean.addProd}" id="buttonAdd" styleClass="invisible">
        		
        	</h:commandButton>

			<rich:dataTable 
                value="#{ventasBean.listaProductos}" var="prod" id="listadoProductosTable"
                rows="5"
                styleClass="fullContainer"
                 >
                <rich:column style="width:20px" >
                	<h:commandLink 
                	onclick="tabla.actionClick('#{rich:clientId('buttonAdd')}','#{rich:clientId('valor')}',#{prod.id})"  rendered="#{prod.stock gt 0}">
                		<h:graphicImage value="/resources/img/buttons/mas.gif" width="15" height="15" />
                	</h:commandLink>
                	
                </rich:column>
                <rich:column sortable="false" label="Cod" id="cod" style="width:37px" >
                    <f:facet name="header">
                        <h:outputText value="Cod"/>
                    </f:facet>
                    <h:outputText value="#{prod.id}" title="Código"/>
                </rich:column>
                <rich:column  id="col_2"
                    label="Nombre" styleClass="anchoAutomatico" >
                    <f:facet name="header">
                        <h:outputText value="Nombre"/>
                    </f:facet>
                    <h:outputText value="#{prod.nombre}"/>
                </rich:column>
                <rich:column label="Precio" style="width:60px">
                    <f:facet name="header">
                        <h:outputText value="Precio" />
                    </f:facet>
                    <h:outputText value="#{prod.precioVenta}">
	                	<f:convertNumber  pattern="$0.00" />
	                </h:outputText>  
                </rich:column>
                <rich:column label="Stock" style="width:60px" >
                    <f:facet name="header">
                        <h:outputText value="Stock" id="Stock" />
                    </f:facet>
                    <h:outputText value="#{prod.stock}" >
                    	<f:convertNumber  pattern="####0.00" />
                   	</h:outputText>
                </rich:column>
                <f:facet name="footer">
                	<rich:dataScroller for="listadoProductosTable" maxPages="5" renderIfSinglePage="false"></rich:dataScroller>
                </f:facet>
            </rich:dataTable>
            
            
        </rich:panel>
        <rich:panel id="vendedor" styleClass="arriba" >
        	<f:facet name="header">
        		<h:outputText value="Vendedor" />
        	</f:facet>
       		<a4j:region >
        		<h:outputLabel value="Número: " for="NumeroVendedor" />
        		<h:inputText value="#{ventasBean.vendedor.id}" id="NumeroVendedor" readonly="true">
        		</h:inputText>
        		<br />
        		<h:outputLabel value="Nombre: " for="NombreVendedor" />
        		<mm:seleccionarVendedor vendedor="#{ventasBean.vendedor}" reRender="NumeroVendedor" requerided="true" />
        		
        	</a4j:region>
        	<br/>
        	
        </rich:panel>
        </h:panelGrid>
        
        <rich:panel id="listaVenta">
        
        <h:inputHidden value="#{ventasBean.prodToDelete}" id="detalleBorrar" />
        <h:commandLink id="detalleBorrarButton" value=" " action="#{ventasBean.quitarProducto}" styleClass="invisible" />
        
        <h:inputHidden id="cambioCantidad" />
        <h:commandLink id="cambioCantidadButton" value=" " action="#{ventasBean.refresh}" styleClass="invisible" />
        
        
        <f:facet name="header">
        		Detalle de la venta.
        	</f:facet>
        	<rich:dataTable value="#{ventasBean.detalleVenta}" var="detalle" styleClass="fullContainer vendedor" >
        	    <rich:column style="width:24px">
        			<f:facet name="header">
        				<h:outputText value="" />
        			</f:facet>
        			<a
                	onclick="tabla.actionClick('#{rich:clientId('detalleBorrarButton')}','#{rich:clientId('detalleBorrar')}',#{detalle.producto.id})" >
                		<h:graphicImage value="/resources/img/buttons/menos.gif" width="15" height="15" />
                	</a>
        		</rich:column>
        		<rich:column style="width:37px" >
        			<f:facet name="header">
        				<h:outputText value="Cód" />
        			</f:facet>
        			<h:outputText value="#{detalle.producto.id}" />
        		</rich:column>
        		<rich:column >
        			<f:facet name="header">
        				<h:outputText value="Producto" />        			
        			</f:facet>
        			<h:outputText value="#{detalle.producto.nombre}" />
        		</rich:column>
        		<rich:column style="width:60px">
        			<f:facet name="header">
        				<h:outputText value="Cantidad" />        			
        			</f:facet>
        			<h:inputText value="#{detalle.cantidad}" onchange="tabla.actionClick('#{rich:clientId('cambioCantidadButton')}','#{rich:clientId('cambioCantidad')}',#{detalle.producto.id})"  >
        				
        			</h:inputText>
        			
        		</rich:column>
        		<rich:column style="width:60px">
        			<f:facet name="header">
      		 			<h:outputText value="P.V." title="Precio de venta" />
        			</f:facet>
        			<h:outputText id="pVTableCell" value="#{detalle.precioVenta}" >
        				<f:convertNumber pattern="$ 0.00"/>
        			</h:outputText>
        		</rich:column>
        		<rich:column style="width:60px">
        			<f:facet name="header">
						<h:outputText value="SubTotal" />
        			</f:facet>
        			<h:outputText id="subTotalTableCell" value="#{detalle.cantidad * detalle.precioVenta}" >
        				<f:convertNumber pattern="$ 0.00"/>
        			</h:outputText>
        		</rich:column>
        		
        		<f:facet name="footer">
        			<rich:column colspan="4" >
        				<h:outputText value="Total: " />
        			</rich:column>
        			<rich:column>
        				<h:outputText value="#{ventasBean.ventaTotal}" >
        					<f:convertNumber pattern="$ #####0.00"/>
        				</h:outputText>
        			</rich:column>
        		</f:facet>
        	</rich:dataTable>
        	
        </rich:panel>
        <rich:panel>
	        <center>
	        	<h:commandButton style="width: 100px; margin-right: 5px;" value="Vender" action="#{ventasBean.cerrarVenta}" />
	        	<h:commandButton style="width: 100px;" value="Cancelar" action="#{ventasBean.nuevaVenta}" />
	       	</center>
        </rich:panel>
        
        
	</h:form>
	</ui:define>
</ui:composition>
</body> 
</html>
